﻿
@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";

}

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>商品展示</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item active">商品</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-info">

                <a href="/Product/Add" class="btn btn-primary">添加</a>


                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info " style="width: 100%;">
                                <thead>
                                    <tr role="row">

                                        <th>序号</th>
                                        <th>商品标题</th>
                                        <th>默认价格</th>
                                        <th>默认库存</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->

            </div>
            <!-- /.card -->
        </div>
    </div>
    <div class="modal fade" id="del-modal" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示框</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>是否确定删除</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                    <button type="button" class="btn btn-primary" onclick="del()">是</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</section>
@section js{
    <script>
        function product() {
            alert(2)
            $("#product").addClass("active");
            $("#category").removeClass("active");
            $("#brand").removeClass("active");
        }
        function update(id) {
            window.location.href = "/Product/Update?id=" + id + "";
        }
        var delID = null;
        function alertDelModel(id) {
            delID = id;
            $("#del-modal").modal();
        }
        function del() {
            if (!delID) {
                return;
            }
            $.ajax({
                type: "POST",
                url: "/Product/Del",
                cache: false,//禁用或缓存
                data: { id: delID },//传入组装的参数
                dataType: "json",
                success: function (result) {
                    if (result.state) {
                        toastr.success('删除成功')
                        $("#del-modal").modal("hide");
                        //刷新datatables
                        $('#table').DataTable().ajax.reload();
                    } else {
                        toastr.error('删除失败')
                    }
                }
            });
        }
        
        $(function () {
           
            //侯海啸
            $("#table").DataTable({
                "lengthChange": false,//不显示更改每页大小的下拉框
                "searching": false,//不显示搜索框
                "paging": true,//启用分页
                "info": true,//显示备注信息
                "ordering": false,//禁止排序
                "autoWidth": true,//宽度自适应
                "processing": true,//开启加载等待
                "iDisplayLength": 3,//每页的大小（显示条数）
                "pagingType": "full_numbers",
                //配置中文提示
                "language": {
                    "processing": "请求数据中...",//加载数据时的提示信息
                    "lengthMenu": "显示 _MENU_ 项结果",
                    "zeroRecords": "没有匹配结果",//无数据时的提示信息
                    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "infoFiltered": "(由 _MAX_ 项结果过滤)",
                    "infoPostFix": "",
                    "search": "搜索:",
                    "searchPlaceholder": "搜索...",
                    "url": "",
                    "emptyTable": "表中数据为空",
                    "loadingRecords": "载入中...",
                    "infoThousands": ",",
                    "paginate": {
                        "first": "首页",
                        "previous": "上页",
                        "next": "下页",
                        "last": "尾页"
                    },
                    "aria": {
                        "sortAscending": ": 以升序排列此列",
                        "sortDescending": ": 以降序排列此列"
                    },
                    "decimal": "-",
                    "thousands": "."

                },
                "serverSide": true,
                "ajax": function (data, callback, settings) {
                    var param = {};
                    param.draw = data.draw;
                    param.pageSize = data.length;
                    param.pageIndex = data.start / data.length + 1;
                    $.ajax({
                        type: "POST",
                        url: "../Product/GetAll",
                        cache: false,
                        data: param,
                        dataType: "json",
                        success: function (result) {
                            setTimeout(function () {
                                callback(result);
                            }, 500);
                        }

                    });
                },
                columns: [
                   
                    { "data": "ID" },
                    { "data": "ProductTitle" },
                    { "data": "Price" },
                    { "data": "Stock" },
               
                    {
                        "data": function (data) {

                            var html = "<button  onclick=\"update(" + data.ID + ");\" class = \"btn btn-sm btn-primary\">编辑</button>";
                            html += "&nbsp;&nbsp;";
                            html += "<button type =\"button\" onclick=\"alertDelModel(" + data.ID + ");\"  class = \"del btn btn-sm btn-danger\">删除</button>";
                            return html;
                        }
                    },

                ]
            });
        });
    </script>
}
